<template>
	<view class="aftersale-apply-detail">
		<view class="content">
			<view class="good-return-card">
				<!-- 商品退货卡片 -->
				<view class="title">订单明细</view>

				<view class="goods-list">
					<evan-checkbox-group ref="checkgroup" v-model="checkGoods" @change="checkChange">
						<view class="good-item" :key="item.id" v-for="(item, index) in orderInfo.goodsList">
							<evan-checkbox
								v-if="type != 'cancel' && type != 'returnPrice'"
								class="check"
								v-model="item.check"
								:label="item.id"
								:icon-size="40"
								:primary-color="'#E5C545'"
							></evan-checkbox>
							<goods-item
								class="good"
								type="cross"
								:name-size="36"
								:name-row-num="2"
								:img="imgHost + item.goodsPic"
								:img-width="'150rpx'"
								:img-height="'200rpx'"
								:price="item.goodsPrise"
								:name="item.goodsName"
								:good-num.sync="item.buyCount"
								:num-min="1"
								:num-max="item.buyCount"
								:is-edit-num="type != 'cancel' && type != 'returnPrice'"
							></goods-item>
						</view>
					</evan-checkbox-group>
				</view>

				<view class="total">
					<view class="all-check" v-if="type != 'cancel' && type != 'returnPrice'">
						<evan-checkbox class="check" @change="checkAll" v-model="allCheck" :label="'all'" :icon-size="40" :primary-color="'#E5C545'"></evan-checkbox>
						全选
					</view>
					<view class="numerical">
						<!-- <text class="total-num">共1件</text> -->
						<view class="sumpay">
							<text class="label">兑换总额</text>
							<text class="symbol">¥</text>
							<text class="num">{{ returnPrice }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="good-return-reason">
				<uniForms class="form">
					<formListItem
						class="return-reason-slc"
						placeholder="请选择"
						:label="typeText + '原因'"
						:label-width="130"
						:input-text-align="'right'"
						:type="'selector'"
						:picker-list="reasonPickerList"
						:arrow-show="true"
						:value.sync="reason"
					></formListItem>
					<formListItem
						v-if="type != 'cancel' && type != 'returnPrice'"
						class="return-reason-textarea"
						type="textarea"
						:label-width="150"
						:maxlength="500"
						:placeholder="'请填写详细原因'"
						:value.sync="reasonExplain"
					></formListItem>
				</uniForms>
			</view>

			<view class="imgUpload" v-if="type != 'cancel' && type != 'returnPrice'">
				<htz-image-upload
					:max="3"
					:choose-num="3"
					:name="'file'"
					v-model="uploadFileList"
					:uploadSuccess="uploadSuccess"
					:headers="{
						'content-type': 'multipart/form-data',
						'jp-bookstore-token': token
					}"
					:formData="{}"
					:action="HOST + '/common/upload'"
				></htz-image-upload>
			</view>
		</view>

		<view class="detail-tools">
			<view class="total">
				<view class="info">
					<view class="sumpay">
						<text class="label">兑换总额:</text>
						<text class="symbol">¥</text>
						<text class="num">{{ returnPrice }}</text>
					</view>
					<text class="sign">退回至原支付渠道</text>
				</view>
			</view>
			<button class="btn btn-orange submit" @click="addOrder">提交</button>
		</view>
	</view>
</template>

<script>
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue';
import uniForms from '@/components/uni-forms/uni-forms.vue';
import formListItem from '@/components/form-list-item/form-list-item.vue';
import evanCheckboxGroup from '@/components/evan-checkbox-group/evan-checkbox-group.vue';
import evanCheckbox from '@/components/evan-checkbox/evan-checkbox.vue';
import goodsItem from '@/components/goods-item/goods-item.vue';
export default {
	components: {
		htzImageUpload,
		uniForms,
		formListItem,
		evanCheckboxGroup,
		evanCheckbox,
		goodsItem
	},
	data() {
		// console.log("订单数据",this.$store.state.aftersaleModule.aftersaleOrderInfo.goodsList)
		return {
			HOST: this.$HOST,
			token: uni.getStorageSync('token') || '',
			imgHost: this.$imgHost,
			id: '', //订单id
			orderNo: '', //订单号
			type: 'cancel', //类型 售后类型 取消：cancel 退货 return 换货 exchange 退款 returnPrice
			typeText: '',
			// goodList: [
			// 	{
			// 		img: '/static/pic4.png',
			// 		price: 3199,
			// 		orgprice: 3299,
			// 		name: '华为po30',
			// 		moneySymbol: '¥',
			// 		content: 'Huawei/华为MatePad Pro平板电脑笔记本二合一新品轻薄全面屏影音无线充电',
			// 		check: false,
			// 		buyCount:0
			// 	}
			// ],
			// reasonPickerList: [
			// 	// 理由选择数据
			// 	{
			// 		label: '选项1-1',
			// 		value: '1-1'
			// 	}
			// ],
			allCheck: false, //全选
			checkNum: 0, //选中数量
			checkGoods: [
				// 选中商品
			],
			orderInfo: this.$store.state.aftersaleModule.aftersaleOrderInfo,
			// goodList:this.$store.state.aftersaleModule.goodList,
			reason: '', //理由
			reasonExplain: '', //理由说明
			uploadFileList: [] //上传文件列表
			// returnPrice:0 //退款金额
		};
	},
	computed: {
		reasonPickerList() {
			if (this.type == 'cancel' || this.type == 'returnPrice')
				return [
					{
						label: '我不想要了',
						value: '我不想要了'
					},
					{
						label: '收货地址填错了',
						value: '收货地址填错了'
					},
					{
						label: '发票信息填错了',
						value: '发票信息填错了'
					}
				];
			else if (this.type == 'return')
				return [
					{
						label: '商品质量问题',
						value: '商品质量问题'
					},
					{
						label: '收到商品破损',
						value: '收到商品破损'
					},
					{
						label: '商品错发/漏发',
						value: '商品错发/漏发'
					},
					{
						label: '发票问题',
						value: '发票问题'
					},
					{
						label: '收到商品描述不符',
						value: '收到商品描述不符'
					}
				];
			else if (this.type == 'exchange')
				return [
					{
						label: '商品质量问题',
						value: '商品质量问题'
					},
					{
						label: '收到商品破损',
						value: '收到商品破损'
					},
					{
						label: '商品错发/漏发',
						value: '商品错发/漏发'
					},
					{
						label: '发票问题',
						value: '发票问题'
					},
					{
						label: '收到商品描述不符',
						value: '收到商品描述不符'
					}
				];
		},
		goodsPrice() {
			//商品总额

			let result = 0;
			if (this.orderInfo && this.orderInfo.goodList && this.orderInfo.goodList.length > 0)
				this.orderInfo.goodList.forEach(item => {
					result = parseFloat(new this.$BigNumber(result).plus(new this.$BigNumber(item.sellPrice).multipliedBy(item.buyCount)));
				});
			return result;
		},
		returnPrice() {
			// 退还价格

			if (this.type != 'cancel' && this.type != 'returnPrice') {
				let result = 0;
				if (this.checkGoods.length > 0) {
					//监听不了数组内的check值变化 多做一层 监听选中数组
					this.orderInfo.goodsList.forEach(item => {
						console.log('item.check', item.check);
						let check = item.check;
						let addNum = parseFloat(new this.$BigNumber(item.goodsPrise).multipliedBy(item.buyCount));
						if (check) result = parseFloat(new this.$BigNumber(result).plus(addNum));
					});
				}
				return result;
			} else {
				return this.orderInfo.goodsPrice;
			}
		},
		returnSum() {
			let result = 0;
			if (this.checkGoods.length > 0) {
				//监听不了数组内的check值变化 多做一层 监听选中数组
				this.orderInfo.goodsList.forEach((item, index) => {
					console.log('item.check', item.check);
					let check = item.check;
					let addNum = item.buyCount;
					if (check) result = result + addNum;
				});
			}
			return result;
		}
	},
	// watch: {
	// 	'$store.state.aftersaleModule.aftersaleOrderInfo': function(newVal, oldVal) {
	// 		console.log('orderInfo改变', newVal);
	// 		this.orderInfo = newVal;
	// 	}
	// 	// 'orderInfo.goodsList':function(newVal,oldVal){
	// 	// 	let result = 0;
	// 	// 	newVal.forEach(item => {
	// 	// 		console.log('item.check', item.check);
	// 	// 		let addNum = item.goodsPrise * item.buyCount;
	// 	// 		if (item.check) result = result + addNum;
	// 	// 	});
	// 	// 	this.returnPrice=result
	// 	// }
	// 	// "$store.state.aftersaleModule.goodList":function(newVal,oldVal){
	// 	// 	console.log("goodList改变",newVal)
	// 	// 	this.goodList=newVal
	// 	// }
	// },
	methods: {
		checkAll(val) {
			// 全选

			console.log('全选', this.$refs);
			if (val) {
				this.orderInfo.goodsList.forEach(item => {
					item.check = true;
					this.checkGoods.push(item.commodityId);
				});
			} else {
				this.orderInfo.goodsList.forEach(item => {
					item.check = false;
				});
				this.checkGoods = [];
			}
			this.getCheckNum(this.checkGoods);
		},
		isCheckALl() {
			var isAll = true;
			this.orderInfo.goodsList.forEach(item => {
				if (item.check == false) isAll = false;
			});
			this.allCheck = isAll;
		},
		getCheckNum(data) {
			this.checkNum = data.length;
		},
		checkChange(even) {
			// 选中发生更改
			console.log('选中发生更改', even);
			this.isCheckALl();
			this.getCheckNum(even);
		},
		uploadSuccess(res) {
			// 上传成功
			console.log('上传成功', res);
		},
		verification() {
			// 验证
			if (!this.reason || this.reason == '') {
				uni.showToast({
					icon: 'none',
					mask: true,
					duration: 2000,
					title: '请选择原因！'
				});
				return false;
			} else if ((this.type == 'return' || this.type == 'exchange') && this.checkGoods.length < 1) {
				uni.showToast({
					icon: 'none',
					mask: true,
					duration: 2000,
					title: '请选择退货商品！'
				});
				return false;
			} else {
				return true;
			}
		},
		addOrder() {
			let option = {};
			if (this.verification()) {
				if (this.type != 'returnPrice') {
					let refundGoods = [];
					this.orderInfo.goodsList.map(item => {
						if (item.check == true) {
							console.log('选中', item);
							refundGoods.push({
								// id:item.id,
								goodsId: item.goodsId,
								goodsName: item.goodsName,
								goodsPic: item.goodsPic,
								goodsPrise: item.goodsPrise,
								orderNo: item.orderNo,
								refundCount: item.buyCount,
								refundMoney: parseFloat(new this.$BigNumber(item.goodsPrise).multipliedBy(item.buyCount))
							});
						}
					});
					option = {
						orderNo: this.orderNo,
						applyMoney: this.returnPrice,
						// refundCount:this.returnSum,
						serveType: this.type == 'returnPrice' ? 0 : this.type == 'return' ? 1 : 2,
						goodsPrise: this.goodsPrise,
						refundGoods:refundGoods,
						refundReason: this.reason,
						refundDescribe: this.reasonExplain,
						refundImg: this.uploadFileList
							.map(item => {
								return item.fileName;
							})
							.toString()
					};
				} else
					option = {
						orderNo: this.orderNo,
						applyMoney: this.orderInfo.orderPrice,
						goodsPrise: this.goodsPrise,
						serveType: this.type == 'returnPrice' ? 0 : this.type == 'return' ? 1 : 2,
						refundGoods: this.orderInfo.goodsList.map(item => {
							return {
								// id:item.id,
								goodsId: item.goodsId,
								goodsName: item.goodsName,
								goodsPic: item.goodsPic,
								goodsPrise: item.goodsPrise,
								orderNo: item.orderNo,
								refundCount: item.buyCount,
								refundMoney: parseFloat(new this.$BigNumber(item.goodsPrise).multipliedBy(item.buyCount))
							};
						}),
						refundReason: this.reason
						// refundDescribe:this.reasonExplain,
					};
				this.$store.dispatch('addRefund', option).then(res => {
					setTimeout(() => {
						uni.showToast({
							icon: 'none',
							mask: true,
							title: `${this.typeText}申请成功，请耐心审核通过！`,
							// title:"申请成功,请耐心等候!",
							duration: 2000
						});
					}, 500);

					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/order/order-list?currentTab=5'
						});
					}, 2000);
				});
			}
		}
	},
	onLoad(option) {
		if (option.id) this.id = option.id;
		if (option.orderNo) this.orderNo = option.orderNo;
		if (option.type) this.type = option.type;
		let text = '详情';
		if (option.type == 'cancel') text = '取消';
		else if (option.type == 'returnPrice') text = '退款';
		else if (option.type == 'return') text = '退货';
		else if (option.type == 'exchange') text = '换货';
		this.typeText = text;
		uni.setNavigationBarTitle({
			title: `申请售后-${text}`
		});
	}
};
</script>

<style lang="scss" scoped>
.aftersale-apply-detail {
	.content {
		padding: 20rpx 20rpx 20rpx 20rpx;
		margin-bottom: 100rpx;
	}
	.good-return-card {
		background-color: #fff;
		border-radius: 6px;
		padding-top: 20rpx;
		.title {
			padding: 0rpx 20rpx 20rpx 20rpx;
			border-bottom: 2rpx solid #cccfd3;
			color: #1b1b1b;
			font-weight: bolder;
		}
		.goods-list {
			padding: 20rpx;
			border-bottom: 2rpx solid #cccfd3;
			.good-item {
				display: flex;
				justify-content: center;
				align-items: center;
				.check {
					margin-right: 40rpx;
				}
				.good {
					width: 100%;
				}
			}
			.good-item:nth-last-child(n + 2) {
				margin-bottom: 20rpx;
			}
		}
		.info-list {
			border-bottom: 2rpx solid #efeff0;
			.form {
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 20rpx;
				.item {
					display: flex;
					width: 100%;
					padding: 0rpx 20rpx;
					background-color: #fff;
					box-sizing: border-box;
				}
				.item:nth-child(1) {
					border-radius: 8px 8px 0px 0px;
				}
				.item:nth-last-child(1) {
					border-radius: 0px 0px 8px 8px;
				}
				.item:nth-last-child(n + 2) {
					border-bottom: 2rpx solid #efeff0;
				}
			}
		}

		.total {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 26rpx;
			.all-check {
				display: flex;
				// align-items: center;
				font-size: 32rpx;
				color: #626679;
				.check {
					margin-right: 15rpx;
				}
			}
			.numerical {
				font-size: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.symbol {
					margin-left: 15rpx;
				}
				.total-num {
					color: #46494d;
					margin-right: 15rpx;
				}
				.sumpay {
					color: #46494d;
					.symbol {
						color: #1b1b1b;
					}
					.num {
						color: #1b1b1b;
						font-weight: bolder;
						margin-left: 8rpx;
					}
				}
			}
		}
	}
	.good-return-reason {
		margin-top: 20rpx;
		border-radius: 6px;
		background-color: #fff;
		.form {
			// display: flex;
			// flex-direction: column;
			::v-deep.return-reason-slc {
				display: block;
				margin-bottom: 20rpx;
				.uni-forms-item__label {
					font-size: 32rpx;
					color: #1b1b1b;
					font-weight: bolder;
				}
				.value-text {
					padding: 12rpx 0px !important;
					font-size: 32rpx !important;
				}
			}

			::v-deep.return-reason-textarea {
				display: block;
				background-color: #f5f5f6;
				border-radius: 6px;
				.uni-forms-item {
					background-color: transparent;
				}
				.uni-easyinput {
					background-color: #f5f5f6;
					border-radius: 6px;
				}
			}

			border-radius: 6px;
			/* #ifdef H5 */
			padding: 20rpx;
			/* #endif */
			/* #ifdef MP */
			::v-deep.uni-forms {
				padding: 20rpx !important;
			}
			/* #endif */
		}
	}
	.detail-tools {
		.submit {
			padding: 14rpx 100rpx;
		}
		.total {
			.info {
				.sumpay {
					font-size: 32rpx;
					.label {
						margin-right: 20rpx;
					}
					.symbol {
						margin-right: 5rpx;
						color: #ff6106;
					}
					.num {
						color: #ff6106;
						font-weight: bolder;
					}
				}
				.sign {
					font-size: 28rpx;
					color: #878787;
				}
			}
		}
	}

	.imgUpload {
		background-color: #ffffff;
	}
}
</style>
